<!--专题文章组件-->
<template>
  <div class="micro-article-ad-box">
    <!--预览控制区-->
    <div class="design-preview-controller"  :style="{background:formData.bgColor,margin:`${formData.marginTop/2}px ${formData.margins/2}px ${formData.marginBottom/2}px`}">
      <div class="navList" v-show="formData.articleSource.articleSource === 1">
        <div class="navItem" v-for="(item,index) in articleTabs" :key="index">
          <div class="navItem_a" :class="{activeNav: index === 0}">{{item.name}}</div>
        </div>
      </div>
      <div :class="formData.indicator===2&&formData.waterfall?'waterfall':formData.indicator===2?'preview-controller-two':''">
        <div class="preview-article"  v-for="(item,index) in articleList" :key="index">
          <div class="preview-article-img" :style="{background:`url(${item.imgUrl}) center center no-repeat`}">
            <div v-show="formData.isGroup">{{item.groupName}}</div>
          </div>
          <!-- <div class="preview-article-title" v-show="formData.isTitle" :style="{color:formData.textColor}">{{item.title}}</div>
          <div class="preview-article-zy" v-show="formData.isAbstract">{{item.contentAbstract}}</div> -->
          <div class="preview-article-title" :class="{ell_1:!formData.waterfall}" v-show="formData.isTitle" :style="{color:formData.textColor}">{{item.title}}</div>
          <div class="preview-article-zy" :class="{ell_1:!formData.waterfall}" v-show="formData.isAbstract">{{item.contentAbstract}}</div>
          <div class="preview-article-content">
            <div class="foot-content-left">
              <span v-show="formData.isAuthor">{{item.authorName}}</span>
            </div>
            <div class="foot-content-right">
              <div class="el-icon-view" v-show="formData.isRead"> {{item.readNum}}</div>
              <div class="el-icon-thumb" v-show="formData.isHelp"> {{item.likeNum}}</div>
              <div class="el-icon-chat-dot-round" v-show="formData.isComment"> {{item.commentNum}}</div>
            </div>
          </div>
        </div>
      </div>
      
    </div>
    <!--编辑工作区-->
    <div v-show="isShowEdit" class="design-editor-item design-hide-class">
      <el-scrollbar wrap-class="scroll-content">
        <div class="rightWrap">
          <div class="design-editor-component-title">专题文章</div>
          <div class="tabRadioWrap">
            <el-radio-group v-model="formData.indicator">
              <el-tooltip v-for="(item,index) in tabList" :key="index" effect="dark" :content="item.title" placement="bottom">
                <el-radio-button :label="index + 1">
                  <span :class="[item.icon]" />
                </el-radio-button>
              </el-tooltip>
            </el-radio-group>
          </div>
          <el-tabs v-model="tabActive" tab-position="top" style="marginTop: 10px;">
            <el-tab-pane label="内容设置" name="0">
              <div class="dis al_item dis_ju_spb setWrap">
                <div class="couponTitle">分组设置</div>
                <!-- <span class="desc">最多10张，可拖动排序</span> -->
              </div>
              <div class="styleWrap styleWrap-padding">
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>文章来源</div>
                  <el-radio-group v-model="formData.articleSource.articleSource" size="small" @change="sourceChange">
                    <el-radio :label="0">文章列表</el-radio>
                    <el-radio :label="1">分组列表</el-radio>
                  </el-radio-group>
                </div>
                <div class="articleList">
                <!-- <draggable>
                  <transition-group> -->
                    <div v-for="(item,index) in articleList" :key="index" class="article-item">
                      <span><i class="article-item-icon el-icon-s-operation" /> 文章：{{ item.title }}</span>
                      <i class="el-icon-circle-close" @click="closeCoupon(index)" />
                    </div>
                  <!-- </transition-group>
                </draggable> -->
                <div class="add-coupon-btn" @click="addArticle">
                  <i class="el-icon-plus" /><span>{{formData.articleSource.articleSource===0?'添加文章':'添加文章分组'}}</span>
                </div>
              </div>
              <div class="btn-style">
                  <el-radio-group v-model="formData.style" size="small" disabled>
                    <el-radio v-for="(item,index) in 4" :key="index" :label="item">样式{{item}}</el-radio>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>文章标题</div>
                  <el-radio-group v-model="formData.isTitle" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>摘要</div>
                  <el-radio-group v-model="formData.isAbstract" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>文章作者</div>
                  <el-radio-group v-model="formData.isAuthor" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>阅读数</div>
                  <el-radio-group v-model="formData.isRead" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>点赞数</div>
                  <el-radio-group v-model="formData.isHelp" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>评论数</div>
                  <el-radio-group v-model="formData.isComment" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>分组标签</div>
                  <el-radio-group v-model="formData.isGroup" size="small">
                    <el-radio-button :label="true">显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="样式设置" name="1">
              <div class="styleWrap">
                <div class="titleStyle">内容样式</div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>文字颜色</div>
                  <el-color-picker v-model="formData.textColor"></el-color-picker>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar">
                  <div>背景颜色</div>
                  <el-color-picker v-model="formData.bgColor"></el-color-picker>
                </div>
                <div class="dis dis_ju_spb al_item w100e item_mar" v-show="formData.indicator === 2 ">
                  <div>瀑布流</div>
                  <el-radio-group v-model="formData.waterfall" size="small">
                    <el-radio-button :label='true'>显示</el-radio-button>
                    <el-radio-button :label="false">隐藏</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
              <div class="styleWrap">
                <div class="titleStyle">组件样式</div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>页边距</span>
                    <span class="text_mar">{{ formData.margins }}px</span>
                  </div>
                  <el-radio-group v-model="formData.margins" size="small">
                    <el-radio-button :label="0">无</el-radio-button>
                    <el-radio-button :label="30">有</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>上边距</span>
                    <span class="text_mar">{{ formData.marginTop }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginTop" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
                <div class="dis al_item dis_ju_spb w100e item_mar">
                  <div class="dis al_item">
                    <span>下边距</span>
                    <span class="text_mar">{{ formData.marginBottom }}px</span>
                  </div>
                  <el-radio-group v-model="formData.marginBottom" size="small">
                    <el-radio-button label="0">小</el-radio-button>
                    <el-radio-button label="15">中</el-radio-button>
                    <el-radio-button label="30">大</el-radio-button>
                  </el-radio-group>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-scrollbar>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      top="5vh"
      title="文章选择"
      :visible.sync="dialogChoose" 
      width="70%"
    >
      <article-tag v-if="isArticle"  :arrLists="arrLists" @articleBox='articleBox' />
      <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
        <el-button size="mini" type="primary" @click="confirm">确定</el-button>
        <el-button size="mini" @click="dialogChoose = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog
      :close-on-click-modal="false"
      top="5vh"
      title="文章分组选择"
      :visible.sync="dialogChooseGroup" 
      width="30%"
    >
      <el-form ref="form" label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="分组选择：">
              <el-select v-model="formData.articleSource.groupIdList" multiple filterable>
                <el-option
                  v-for="item in groupList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="文章显示条数：">
              <el-input v-model="formData.articleSource.maxArticleNum"  type="number" class="no-number"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer" style="text-align: right;margin-top: 20px;">
        <el-button size="mini" type="primary" @click="confirmGroup">确定</el-button>
        <el-button size="mini" @click="dialogChooseGroup = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<script>
import index from './index.js'

export default index
</script>
